<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kickstart forms-style</title>
</head>
<link rel="stylesheet" type="text/css" href="kickstart-forms.css" />
<style>
    li
    {
        display:inline-block;
        padding: 7px;
        border-bottom-color: transparent;
        border-bottom-width: 3px;
        border-bottom-style: solid;
    }
    a
    {  text-decoration: none;
        color: #ffffff;
    }
    a:hover
    {
        transition: all 0.3s ease;
        transform: rotate(5deg);
        color:#FF9;
    }
    li:hover
    {
        border-bottom-color: red;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        transition: all 0.3s ease;
        transform: translateX(20);
    }
    ul
    {
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 5px;
        border: solid 1px #c6c6c6;
        margin-top: 20px;
        width: 100%;
    }
    .traniangle
    { border-bottom-width: 5px;
        border-right-width: 15px;
        border-top-width: 13px;
        border-left-width: 15px;
        width: 0px;
        height: 0px;
        border-style:solid solid solid solid;
        border-color: #ff6308 transparent transparent transparent ;
    }
</style>
<body style="font-family:'Comic Sans MS', cursive; color:#343434; font-size:18px;">
<div>
<ul>
    <li><a style="color: #ff9c10;" href="kickstart%20introduce%20.html">HTML Kickstart</a></li>
    <span class="traniangle"><li><a href="table.html">table</a></li></span> <!--  class="active"-->
    <span class="traniangle"><li><a href="menus.html">menus</a></li></span>
    <span class="traniangle"><li><a href="button.html">button</a></li></span>
    <span class="traniangle"><li><a href="kickstart forms-style.html">forms</a></li></span>
</ul>
</div>
<div style=" margin-top:50px;">
<form>
<table cellpadding="20px" align="center">
<tr>
<td colspan="3" align="center" style="font-size:28px;">HTML kickstart-forms style</td>
</tr>
<tr>
    <td><input type="text" /><br />
    <details>
        <summary>无class样式</summary>
           <textarea style="width: 200px; height: 100px;">
      input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
    }
               </textarea>
    </details>
    </td>
    <td><input type="text"  class="notice"/>
        <details>
            <summary>class:notice</summary>
           <textarea style="width: 200px; height: 100px;">
              input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
    }
    .notice{
        border:1px solid gold;
        background:lightyellow;
        padding:10px 20px 10px 40px;
        margin:10px 0;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        color:#DEAE00;
        line-height:120%;
        vertical-align: center;
        text-shadow:0px 1px rgba(255,255,255,0.5);
        position:relative;
        top:0;
        left:0;
        clear:both;
    }
           </textarea>
        </details>
    </td>
    <td><input  type="range"/><br/>
        <details>
            <summary>无class样式</summary>
           <textarea style="width: 200px; height: 100px;">
              input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
    }

               </textarea>
        </details>
    </td>
</tr>
<tr>
	<td><input type="text" class=" blue" /><br/>
        <details>
            <summary>class:blue</summary>
           <textarea style="width: 200px; height: 100px;">
   input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
        transition: all 0.5s ease;
    }
    .blue
    {
        border: #39b5ff solid 5px;
        border-radius:5px;
        background:#FF9;

    }
               </textarea>
        </details>
    </td>
    <td><input type="text" class=" orange" /><br/>
        <details>
            <summary>class:orange</summary>
           <textarea style="width: 200px; height: 100px;">
 input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
        transition: all 0.5s ease;
    }
    .orange
    {
        border:#FC0 solid 5px;
        border-radius:5px;
        background:#FF9;
    }
               </textarea>
        </details>
    </td>
      <td><input type="text" class=" purple" /><br/>
          <details>
              <summary>class:purple</summary>
           <textarea style="width: 200px; height: 100px;">
           input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
        transition: all 0.5s ease;
    }
  .purple
	{
	border:#F3C solid 5px;
	border-radius:5px;
	background:#FF9;
		}

               </textarea>
          </details>
      </td>
</tr>
<tr>
	<td><input type="text" class=" red" /><br/>
        <details>
            <summary>class:red</summary>
           <textarea style="width: 200px; height: 100px;">
           input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
        transition: all 0.5s ease;
    }
   .red
	{
	border:#F00 solid 5px;
	border-radius:5px;
	background:#FF9;
		}
               </textarea>
        </details>
    </td>
    <td><input type="text" class=" green" /><br/>
        <details>
            <summary>class:green</summary>
           <textarea style="width: 200px; height: 100px;">
            input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
        transition: all 0.5s ease;
    }
   .green
	{
	border:#9F0 solid 5px;
	border-radius:5px;
	background:#FF9;
		}
               </textarea>
        </details>
    </td>
    <td><input type="text" class=" yellow" /><br/>
        <details>
            <summary>class:yellow</summary>
           <textarea style="width: 200px; height: 100px;">
           input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input[type="text"]:focus,
    textarea:focus,
    button:focus,
    select:focus,
    input[type="file"]:focus,
    input[type="password"]:focus
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
        transition: all 0.5s ease;
    }
   .yellow
	{
	border:#FF0 solid 5px;
	border-radius:5px;
	background:#FF9;
	}
               </textarea>
        </details>
    </td>
</tr>
<tr>
    <td><legend>Here is your title</legend><br/>  <details>
        <summary>无class样式</summary>
           <textarea style="width: 200px; height: 100px;">
         legend{
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        border:1px solid #ccc;
        background:#f5f5f5;
        padding:2px 10px;
        margin:0 0 0 0;
        display:block;
        position: relative;
        top:0;
        left:0;
    }
               </textarea>
    </details></td>
    <td><input type="file" class="file" /><br/>
        <details>
            <summary>class:file</summary>
           <textarea style="width: 200px; height: 100px;">
    input[type="file"]
    {
    -moz-transition: -moz-box-shadow 0.5s, border 0.5s, background 0.5s;
    -webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, background 0.5s;
    -o-transition:  box-shadow 0.5s, border 0.5s, background 0.5s;
    transition: box-shadow 0.5s, border 0.5s, background 0.5s;
        font-size: larger;
        }
               </textarea>
        </details>
    </td>
    <td><textarea>ABC</textarea><br/>
        <details>
            <summary>无class样式</summary>
           <textarea style="width: 200px; height: 100px;">
        textarea{
        width:auto;
        height:200px;
        margin:0;
        border:1px solid #ccc;
        padding:5px;
        vertical-align: middle;
        font-family:inherit;
        font-size:0.9em;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    textarea:focus,
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
    }
           </textarea>
        </details>
    </td>
    </tr>
    <tr>
    <td><input type="radio" class="radio" />A<br/>
        <details>
            <summary>class:radio</summary>
           <textarea style="width: 200px; height: 100px;">
 input[type="radio"]{
        display:inline;
        width:auto;
        margin:0;
        padding:0;
        border:0;
        background:none;
        vertical-align:center;
        *vertical-align: top;
    }
           </textarea>
        </details>
    </td>
    <td><input type="color" style="width:40px;" />color choose<br/>
    </td>
    <td><input type="date"  /><br/>
        <details>
            <summary>class:无class样式</summary>
           <textarea style="width: 200px; height: 100px;">
      input{
        display:inline-block;
        *display:inline;
        vertical-align: middle;
        width:auto;
        zoom:1;
        margin:0;
        border:1px solid #ccc;
        font-size:1em;
        padding:5px 0;
        text-indent: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        background:#fff;
        -moz-box-shadow:inset 0 0 6px #ccc;
        -webkit-box-shadow:inset 0 1px 6px #ccc;
        box-shadow:inset 0 1px 6px #ccc;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    input:focus,
    {
        -webkit-box-shadow: 0 0 7px #6DB9FF;
        -moz-box-shadow   : 0 0 7px #6DB9FF;
        box-shadow        : 0 0 7px #6DB9FF;
        border: 1px solid #50B1FE;
        outline: none;
    }

               </textarea>
        </details>
    </td>
</tr>

</table>
</form>
</div>
<hr width="70%" size="5" color="#343434"/>
<div style=" text-align:center; font-size:18px;">Welcome to join in the “二班Open Source”</div>


</body>
</html>
